<template>
	<!-- 开启选中功能highlight-current-row border边框 show-summary分页 height固定表头 current-change选中事件-->
	<div style="width: 100%">
		<ul>
			<li>
				<span>我的头像</span>
				<p>
					<el-upload class="avatar-uploader" action="http://127.0.0.1:8888/uphead" :http-request="func"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<b style="color: red;width: 180px;text-align: center;display: block;">(点击头像更换)</b>
				</p>
			</li>
		</ul>
		<el-form label-position="top" :rules="rules" ref="logins" label-width="140px" :model="formLabelAlign">
			<el-form-item :label="'当前昵称('+vuex_user.userName+')'"  prop="userName">
				<el-input v-model="formLabelAlign.userName" :placeholder="vuex_user.userName"></el-input>
			</el-form-item>
			<el-form-item :label="'当前地址('+vuex_user.address+')'" prop="address">
				<el-input v-model="formLabelAlign.address" :placeholder="vuex_user.address"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width: 100px;display: block;float: right;" type="primary"
					@click="submitForm('dynamicValidateForm')">更改</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'center',
		data() {
			return {
				imageUrl: '',
				formLabelAlign: {
					address: '',
					userName: ''
				},
				rules: {
				    userName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
				    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
				},
			};
		},
		created() {
			this.formLabelAlign.address = this.vuex_user.address;
			this.formLabelAlign.userName = this.vuex_user.userName;
			this.imageUrl = this.vuex_user.headImg?this.vuex_user.headImg:require('../../assets/img/img.jpg')
		},
		runfunc(vue) {
			vue.runfunc(['a', 'c'], function() { //c:created m:mounted a:activated u:updated d:destroyed

			})
			vue.runfunc('m', function() {})
		},
		components: {},
		computed: {

		},
		methods: {
			submitForm(){
				this.$refs.logins.validate(vaslid => {
				    if (vaslid) {
				        this.sub();
				    } else {
				        this.$message.error('请输入昵称以及地址');
				        //console.log('error submit!!');
				        return false;
				    }
				});
			},
			sub(){
				this.$axios({
					url: '/setinfo?userId=' + this.vuex_user.userId,
					method: 'post',
					data: this.formLabelAlign,
				}).then((res) => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.vuex_user.address = res.address;
						this.vuex_user.userName = res.userName;
						this.vuex('vuex_user', this.vuex_user, -1);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			handleAvatarSuccess(res, file) {
			},
			func(file) {
				var formData = new FormData();
				formData.append("file", file.file);
				this.$axios({
					url: '/uphead?userId=' + this.vuex_user.userId,
					method: 'post',
					data: formData,
					processData: false, // 使数据不做处理
					contentType: false
				}).then((res) => {
					if (res.code == 200) {
						this.imageUrl = res.url;
						this.$message.success(res.msg);
						this.vuex_user.headImg = res.url;
						this.vuex('vuex_user', this.vuex_user, -1);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		watch: {}
	};
</script>
<style scoped>
	ul {
		margin-top: 10px;
	}

	ul li {}

	ul li span {
		display: block;
		line-height: 180px;
		float: left;
		text-align: right;
		width: 100px;
		margin-right: 40px;
	}

	ul li p {
		margin-left: 20px;
		overflow: hidden;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 178px !important;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
